<template>
    <div class="list_item_cp" @click="on_item">
        <!-- <img 
            @click.stop="on_icon"
            src="https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/c98f23fb2f123aa08bcb21190a238e96e2f8c03d960e2ea222ca2d57f33754bc5559a4bfb44d6169fccdee319d0c2092?pictype=scale&from=30013&version=3.3.3.3&uin=2978968560&fname=wallhaven-96w8e8.jpg&size=64" 
            alt=""/> -->
        <i :class="[
                data_obj.fileType ? get_fileicon_by_type(data_obj.fileType) : get_fileicon_by_name(data_obj.fileName || data_obj.hadoopFileName),
                'icon',
            ]">
        </i>
        <span @click.stop="on_filename">
            {{get_file_name(data_obj.fileName) || get_file_name(data_obj.hadoopFileName)}}
        </span>
    </div>
</template>

<script>
import {get_fileicon_by_type} from '@/common/my_tools'
export default { //列表模式显示时的item(只包含文件名及图标部分) 控制图标的显示和链接的跳转
    name: 'List_item_cp',
    props:{
        data_obj:{
            type:Object,
            default:()=>{
                return {};
            },
        },
    },
    data(){
        return{
        };
    },
    created(){
    },
    methods:{
        on_item(){ //组件点击事件
            //console.log(1);
        },
        get_file_name(name){ //去除尾部后缀
            if(name){
                let names = name.split('.')
                names.pop()
                return names.join('.');
            }
        },
        on_filename(){ //文件名称点击事件
            switch(this.data_obj.fileType){
                case 'folder':
                    this.$router.push('/disk/folder');
                    break;
            }
        },
        on_icon(){ //文件图标点击事件

        },
        get_fileicon_by_name(name){ //根据文件名获取文件类型
            let _list = name.split('.');
            return this.get_fileicon_by_type(_list[_list.length-2]);
        },
        get_fileicon_by_type(_type){ //根据文件类型获得问价图标类名
            return get_fileicon_by_type(_type);
        },
    },
}
</script>

<style scoped lang='scss'>
.list_item_cp{
    width:100%;
    height: fit-content;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    img{
        width: 40px;
        height: 40px;
        margin-right: 10px;
        border-radius: 3px;
        cursor: pointer;
    }
    i{
        width: 30px;
        height: 30px;
        min-width: 30px;
        margin: 5px;
        margin-right: 15px;
    }
    span{
        cursor: pointer;
        transition: all 0.2s;
        &:hover{
            text-decoration: underline;
        }
    }
}
</style>
